<template>
  <div class="time-view-slider">
    <div class="slider-box">
      <span class="label">{{ $t('显示单位') }}</span>
      <el-slider
        v-model="timeSlide"
        @change="timeChange"></el-slider>
    </div>
    <div class="slider-box">
      <span class="label">{{ $t('高') }}</span>
      <el-slider
        v-model="heightSlide"
        @change="heightChange"></el-slider>
    </div>
  </div>
</template>

<script>
// 控制视图组件横纵粒度的滑块
export default {
  name: 'TimeViewSlider',
  props: {
    cellWidthRange: { // 元素宽度范围 --- [最小,最大]
      type: Array,
      default() {
        return [100, 200] 
      }
    },
    cellHeightRange: { // 元素高度范围 --- [最小,最大]
      type: Array,
      default() {
        return [100, 238] 
      }
    },
    stepRange: { // 步数控制粒度 --- [最小,最大] 值参考helper.js中的STEP_PERTIME
      type: Array,
      default() {
        return [0, 7] // 默认粒度拉满
      }
    }
  },
  data() {
    return {
      timeSlide: 0,
      heightSlide: 0
    }
  },
  computed: {
    perWidthVal() { // 每段的宽度度量 el-slider最大为100
      let totalStep = this.stepRange[1] - this.stepRange[0]
      return 100 / totalStep
    },
    perWidth() { // 每段宽度
      return this.cellWidthRange[1] - this.cellWidthRange[0]
    }
  },
  methods: {
    timeChange(v) {
      console.log(this.cellWidthRange[0], '----ww')
      const currStep = ~~(v / this.perWidthVal) + this.stepRange[0] // 当前所在粒度
      const dV = v % this.perWidthVal // 所在步数后的余量
      const cellWidth = dV / this.perWidthVal * this.perWidth + this.cellWidthRange[0] // 元素宽度
      console.log(cellWidth)
      this.$emit('timeChange', {
        step: currStep,
        cellWidth
      })
    },
    heightChange(v) {
      const dH = this.cellHeightRange[1] - this.cellHeightRange[0]
      const cellHeight = v / 100 * dH + this.cellHeightRange[0]
      console.log(cellHeight)
      this.$emit('heightChange', cellHeight)
    }
  }
}
</script>

<style lang='scss' scoped>
.time-view-slider {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;

  .slider-box {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    .label {
      flex-basis: 25%;
      margin-right: 10px;
      text-align: right;
      padding-right: 10px;
    }
    .el-slider {
      flex-basis: 50%;
    }
  }
}
</style>